<template>
  <view class="root">
    <acme-app-bar title="ListView"></acme-app-bar>
    
    <acme-refresh ref="refresh" @refresh="refresh" :scrollTop="scrollTop">
      <view slot="container">
        <view class="title">商品列表-垂直</view>
        <list-view1></list-view1>
        <view class="title">商品列表-水平</view>
        <list-view2></list-view2>
        <view class="title">任务列表</view>
        <list-view3></list-view3>
        <view class="title">关注列表</view>
        <list-view4></list-view4>
      </view>
    </acme-refresh>
  </view>
</template>

<script>
  import ListView1 from './ListView1.vue'
  import ListView2 from './ListView2.vue'
  import ListView3 from './ListView3.vue'
  import ListView4 from './ListView4.vue'
  import AcmeRefresh from '@/components/acme-design/refresh/index.vue'
  
  export default {
    components: {
      ListView1,
      ListView2,
      ListView3,
      ListView4,
      AcmeRefresh
    },
    data() {
      return {
        scrollTop: 0
      }
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop
    },
    methods: {
      refresh() {
        setTimeout(() => {
          this.$refs.refresh.completed()
        }, 2000)
      },
      runRefresh() {
        this.$refs.refresh.runRefresh()
      }
    },
    methods: {
      refresh() {
        setTimeout(() => {
          this.$refs.refresh.completed()
        }, 1500)
      },
      runRefresh() {
        this.$refs.refresh.runRefresh()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    min-height: 100vh;
    overflow: hidden;
    
    .acme-refresh {
      padding: 0 24upx 50upx 24upx;
      box-sizing: border-box;
    }
    
    .title {
      margin: 45upx 0 20upx 0;
      color: #888;
      font-size: 28upx;
      
      &:first-of-type {
        margin-top: 20upx;
      }
    }
  }
</style>
